const body = document.body
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')

let activeSlide = 0
setBgToBody()

function setBgToBody(){
    body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}
function setImgtoSlides(){
    slides[activeSlide].classList.add('active')
}

leftBtn.addEventListener('click', () => {
    slides[activeSlide].classList.remove('active')
    activeSlide--
    if(activeSlide < 0) activeSlide = slides.length - 1
    setBgToBody()
    setImgtoSlides()
})
rightBtn.addEventListener('click', () => {
    slides[activeSlide].classList.remove('active')
    activeSlide++
    if(activeSlide >= slides.length) activeSlide = 0
    setBgToBody()
    setImgtoSlides()
})